*, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; border:0; } 
body {min-height: 950px; font-family: "Microsoft YaHei"; color: #fff; background:url(../img/food-bg.jpg) no-repeat center center;background-size: cover }
::-webkit-scrollbar {
    width: 0px; 
}
.bg{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.7); z-index: 1}
ul{padding:0;margin:0;}
li{list-style: none}
 #wrapper-inner{position: relative; width: 950px; margin:0 auto; z-index: 2}
 .wrapper-inner-tab{position: relative; float: left; width: 950px; margin-top: 125px; }
 .title {width: 100%; margin-top: 30px; font-size: 25px;  float: left; text-align: center; margin-bottom: 80px; }
 .backgrounds {float: left; height: 300px; width: 950px;min-width: 950px; }
 .first{float: left; height: 300px; width: 33.33%; background-color: #feb41d; }
 .second{float: left; height: 300px; width: 33.33%; background-color: #5e7c87; }
 .third{float: left; height: 300px; width: 33.33%; background-color: #4c5f6d; }
 .sim-button{line-height: 50px; height: 50px; text-align: center; margin-right: auto; margin-left: auto; margin-top: 125px; width: 60%; cursor: pointer; }
 .button{color: rgba(255,255,255,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; }
 .button a{color: rgba(51,51,51,1); text-decoration: none; display: block; }
 .button span{z-index: 2; display: block; position: absolute; width: 100%; height: 100%; }
 .button::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25); }
 .button::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.25); }
 .button:hover::before{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); background-color: rgba(255,255,255,0); }
 .button:hover::after{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: rgba(255,255,255,0); }
 .button.btn-on::before{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); background-color: rgba(255,255,255,0); }
 .button.btn-on::after{-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: rgba(255,255,255,0); }
 .food-div{position: absolute;width: 950px;height: 45px;bottom:-100px;overflow: hidden;font-size: 34px;}
 .food-div ul{position: absolute; left: 0; top: 0;width: 100%;text-align: center;} 
 .food-div li{height: 45px;}
 #stop{position: relative; width: 168px;height: 60px;display: none;margin-left: calc(50% - 84px);top:200px;border: solid 2px #b9b6b1;background: transparent; -webkit-transition: all .5s ease; transition: all .5s ease; color: #fff; font-size: 24px; letter-spacing: 2px; outline: none; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; cursor: pointer; box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);}
#stop:hover{box-shadow:20px 38px 34px -26px rgba(255, 255, 255, 0.58);}
.box{display: none;position: absolute;width: 100%;height: 100%;z-index: 2;color:#000;text-align: center;z-index: 3;}
#confirm-bg,#mood-bg{width: 100%;height: 100%;background: rgba(255,255,255,.3);}
#confirm #confirm-box{position: absolute;top:50%;left:50%;width: 400px;min-height: 220px;padding-bottom: 20px; background: #fff; transform :translate(-50%,-50%); border-radius: 8px}
#confirm #confirm-img{height: 116px;background: url(../img/question.png) no-repeat center center/92px auto;}
#mood-sad #mood-img{height: 100px;background: url(../img/cry.png) no-repeat center center/84px auto;}
#mood-happy #mood-img{height: 125px;background: url(../img/laugh.png) no-repeat center center/84px auto;}
#confirm #confirm-title{font:20px/20px bold;}
#confirm #confirm-message{font-size: 14px;margin: 10px auto 20px;}
.box button{background-color: #c1c1c1; color: #fff; border: none; box-shadow: none; font-size: 17px; font-weight: 500; -webkit-border-radius: 4px; border-radius: 5px; padding: 10px 30px; cursor: pointer; margin: 0 10px; outline: none;} 
#confirm button:first-child{background: #c1c1c1}
#confirm button:last-child{ background-color: #8CD4F5;}
#mood-happy button{background: #8CD4F5}
#mood-box{position: absolute;top:50%;left:50%;width: 400px;min-height: 220px;padding-bottom: 20px; background: #fff; transform :translate(-50%,-50%); border-radius: 8px}
.message{width: 300px;margin: 0 auto;margin-bottom: 14px;}
.add-a{color:#dad6d6;text-align: center;line-height: 50px;font-size: 16px;}
.add-a a{color: #feb41d;text-decoration: none;font-size: 18px} 

.add-food-page{position: absolute;left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 500px;z-index: 2} 
.add-food-box{position: relative;height: 500px;}
.form-box{position: absolute; margin:auto;left: 0;top: 0;right: 0;bottom: 0;width: 500px;height: 185px;background:#d6d1d1;border-radius: 6px;}
.clearfix{width: 330px;text-align: center;box-sizing: border-box;margin: 35px auto;padding-bottom: 30px } 
.form-box input{outline: none;border:#000;width: 230px;height: 47px;background:#65727b;color:#fff;padding-left: 10px;box-sizing:border-box;font-size: 14px;} 
.form-box input::-webkit-input-placeholder{color:#bbb9b9;}
.type{width: 100px;height: 47px;background: #333; position: relative;cursor: pointer;color:#bbb9b9; z-index: 3;}
.clearfix input,.clearfix .type{float: left; display: inline-block;line-height: 47px;vertical-align: top}
.food-btn2{outline: none;cursor: pointer;z-index: 2;  height: 47px; line-height: 47px;display: block; background: #FEB41D; text-align: center; width:330px;margin:9px auto; color: #fff;font-size: 16px}
#delete-food-btn{outline: none;cursor: pointer;z-index: 2;  height: 47px; line-height: 47px;display: block; background: #FEB41D; text-align: center; width:300px;margin:9px auto; color: #fff;font-size: 16px}
#type-ul li{font-size: 15px; text-align: center;border-top:1px solid #fff;background: #333;cursor: pointer;height: 38px;line-height: 38px;}
#type-ul{width: 100px;display: none;} 

input[name=newname]{width: 330px;position: relative;margin: 0 auto;display: block;}
.form-box-update{height:255px;}
.form-box-update .food-btn2{position: relative;top:20px;}

.success-box{width: 330px;background: #fff;color: #333;padding:0 30px; height: 70px;line-height: 70px;text-align: center;border-radius: 10px;box-shadow: 0 0 14px 10px #fff;margin:auto;position: absolute;top:0;left: 0;right: 0;bottom: 0;z-index: 4;font-size: 22px;font-weight: bold;}



/*loading*/
#loading {display: none;font-size: 100px; width: 1em; height: 1em; position: absolute;left: 0;right: 0;top:0;bottom:0;margin:auto; border-radius: 50%; border: .01em solid rgba(255,255,255,.3);z-index: 99} 
#loading li {position: absolute; width: .2em; height: .2em; border-radius: 50%; }
#loading li:nth-child(1) {left: 50%; top: 0; margin: 0 0 0 -.1em; background: #00C176; -webkit-transform-origin: 50% 250%; transform-origin: 50% 250%; -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
#loading li:nth-child(2) {top: 50%; right: 0; margin: -.1em 0 0 0; background: #FF003C; -webkit-transform-origin: -150% 50%; transform-origin: -150% 50%; -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
#loading li:nth-child(3) {left: 50%; bottom: 0; margin: 0 0 0 -.1em; background: #FABE28; -webkit-transform-origin: 50% -150%; transform-origin: 50% -150%; -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
#loading li:nth-child(4) {top: 50%; left: 0; margin: -.1em 0 0 0; background: #88C100; -webkit-transform-origin: 250% 50%; transform-origin: 250% 50%; -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }

@-webkit-keyframes rota {
    from { }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes rota {
    from { }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes opa {
    0% { }
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes opa {
    0% { }
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
} 


.page404{background-image: none;color: #000}
.page404 div.txt404{z-index:999;position: relative;height: 400px;text-align: center;margin:auto;position: absolute;top:0;left: 0;right: 0;bottom: 0;font:bold 300px/1 "microsoft yahei";}
.page404 span{font:bold 50px "microsoft yahei";position: absolute;}